<template xmlns:el-col="http://www.w3.org/1999/html">
    <!-- 组件中只有一个弹窗 -->
    <el-dialog v-model="taskEditWinDialogVisible" title="编辑任务" width="50%" @close="handleClose">
        <template #default>

            <div>
                当前项目为:{{ project.projectName }}
            </div>
            <el-form style="margin-top: 10px" :model="editTask" label-width="auto">
                <el-form-item label="任务标题">
                    <el-input v-model="editTask.taskTitle" />
                </el-form-item>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="任务进度">
                            <el-input-number min="1" v-model="editTask.taskDuration" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="任务工期">
                            <el-input-number min="1" v-model="editTask.taskProgress" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="开始时间">
                            <el-date-picker v-model="editTask.startTime" type="date" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="结束时间">
                            <el-date-picker v-model="editTask.endTime" type="date" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-form-item label="任务描述">
                    <!-- 富文本编辑器的结构 -->
                    <div style="border: 1px solid #ccc">
                        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"
                            :defaultConfig="toolbarConfig" :mode="mode"/>
                        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml"
                            :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                    </div>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="负责人">
                            <el-select v-model="editTask.userId" style="width: 150px">
                                <el-option :value="0" label="暂不分配人员" />
                                <el-option v-for="user in users" :value="user.userId" :label="user.username" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <el-radio-group v-model="editTask.taskStatus">
                                <el-radio :value="1" label="正常" />
                                <el-radio :value="2" label="暂停" />
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelEditTask">取消</el-button>
                <el-button type="primary" @click="editTaskSubmit">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import loginRequest from "@/api/login.js";
import taskRequest from "@/api/task.js";
import { ElMessage } from "element-plus";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['editComplete', 'cancelTaskEdit'])
// 弹窗标记
let taskEditWinDialogVisible = ref(false);
// 存储所有用户
let users = ref([]);
// 申明的属性
// project：当前的项目
// taskId: 当前要编辑的任务的编号
let props = defineProps(["project", "taskId"]);
// 编辑的项目对象
let editTask = ref({})
// 富文本编辑器相关的属性
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML ，如果我们修改了内容，这里会跟着变化
const valueHtml = ref('');
// 工具栏配置
const toolbarConfig = {}
// 编辑器配置
const editorConfig = { placeholder: '请输入任务描述...' }
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

/**
 * 取消编辑按钮事件
 */
function cancelEditTask() {
    // 将当前的编辑对象置空
    editTask = ref({});
    // 关闭窗体
    taskEditWinDialogVisible.value = false;
    // 触发暴漏出去的取消编辑的事件
    emits("cancelTaskEdit")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose() {
    // 触发暴漏出去的取消编辑的事件
    emits("cancelTaskEdit")
}

/**
 * 编辑提交
 */
function editTaskSubmit() {
    // editTask.value.taskDesc = valueHtml.value;
    // editTask.value.taskParent = 1;
    // editTask.value.taskParentId = 0;
    // editTask.value.projectId = props.project.projectId;
    // if(props.parentTask){
    //     editTask.value.taskParentId = props.parentTask.taskId;
    // }
    editTask.value.taskDesc = valueHtml.value;
    taskRequest.update(editTask.value, res => {
        if (res.code == 200) {
            ElMessage({
                type: "success",
                message: "编辑任务成功"
            });
            // 关闭弹窗
            cancelEditTask();
            // 触发编辑完成的事件
            emits('editComplete', res.data);
        } else {
            ElMessage({
                type: "warning",
                message: "任务编辑失败"
            });
        }
    })
}

/**
 * 通过taskId加载任务信息
 * @param taskId
 */
function loadTaskById(taskId) {
    taskRequest.getById(taskId, res => {
        if (res.data) {
            editTask.value = res.data;
            valueHtml.value = editTask.value.taskDesc;
            // 弹窗
            taskEditWinDialogVisible.value = true;
        }
    });
}

/**
 * 侦听器 侦听 props.taskId
 * // 每次属性props.taskId发生变化这里都会执行
 */
watch(() => props.taskId, () => {
    // 判断taskId是否是-1，如果是-1，说明是取消操作，不需要做任何操作。
    if (props.taskId != -1) {
        // 如果不是-1 就加载要编辑的数据
        loadTaskById(props.taskId);
    }
});

onMounted(() => {
    // 加载所有的用户
    loginRequest.loadUsers(res => {
        users.value = res.data;
    })
})
</script>
<style scoped></style>